<template>
  <div class="dashboard-editor-container">

<!--    <panel-group @handleSetLineChartData="handleSetLineChartData" />-->
    <panel-group v-if="publishFlag" :options="options.publishPanelGroupOptions" />
    <panel-group v-if="operateFlag" :options="options.operatePanelGroupOptions" />
    <panel-group v-if="investFlag" :options="options.investPanelGroupOptions" />

    <el-row v-if="publishFlag" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;" :gutter="32">
      <el-col :lg="24" :sm="24" :xs="24">
        <div class="chart-wrapper">
          <line-chart :chartData="publishLineChart" />
        </div>
      </el-col>
    </el-row>

    <el-row v-if="operateFlag" :gutter="32">
      <el-col :lg="16" :sm="24" :xs="24">
        <div class="chart-wrapper">
          <line-chart :chartData="operateLineChart" />
        </div>
      </el-col>
      <el-col :lg="8" :sm="24" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>股票价格排名</span>
            <el-button style="float: right; padding: 3px 0" type="text">刷新</el-button>
          </div>
          <div v-for="(item, i) in operateStockRankTop10" class="text item">
            <span>{{ item.name }}</span>
            <span class="rank-price">{{ item.latestPrice }}</span>
            <div style="clear: both;"></div>
            <el-divider></el-divider>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row v-if="investFlag" :gutter="32">
      <el-col :lg="16" :sm="24" :xs="24">
        <div class="chart-wrapper">
          <line-chart :chartData="publishLineChart" />
        </div>
      </el-col>
      <el-col :lg="8" :sm="24" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>股票价格排名</span>
            <el-button style="float: right; padding: 3px 0" type="text">刷新</el-button>
          </div>
          <div v-for="(item, i) in investStockRankTop10" class="text item">
            <span>{{ item.name }}</span>
            <span class="rank-price">{{ item.latestPrice }}</span>
            <div style="clear: both;"></div>
            <el-divider></el-divider>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import { getUserProfile } from "@/api/system/user";
import {getStockByOwner} from "@/api/operate/stock";
import {
  getInvestPanelGroup, getInvestStockRankTop10,
  getOperateChartData,
  getOperatePanelGroup,
  getOperateStockRankTop10,
  getPublishChartData
} from "@/api/home/home";

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      user: null,
      roleGroup: null,
      postGroup: null,

      publishFlag: false,
      investFlag: false,
      operateFlag: false,

      options: {
        publishPanelGroupOptions: [
          {
            text: '开盘价格',
            startValue: 0,
            endValue: 2300,
            duration: 1000,
            svgName: 'tool',
            color: '#40c9c6',
            type: 'newVisitis',
            decimals: 2,
          },
          {
            text: '最新价格',
            startValue: 0,
            endValue: 3000,
            duration: 1000,
            svgName: 'table',
            color: '#36a3f7',
            type: 'messages',
            decimals: 2,
          },
          {
            text: '发行数量',
            startValue: 0,
            endValue: 50,
            duration: 1000,
            svgName: 'select',
            color: '#f4516c',
            type: 'purchases',
            decimals: 0,
          },
          {
            text: '成交股数',
            startValue: 0,
            endValue: 15,
            duration: 1000,
            svgName: 'rate',
            color: '#34bfa3',
            type: 'shoppings',
            decimals: 0,
          }
        ],
        operatePanelGroupOptions: [
          {
            text: '发行人',
            startValue: 0,
            endValue: 152,
            duration: 1000,
            svgName: 'peoples',
            color: '#40c9c6',
            type: 'newVisitis',
            decimals: 0,
          },
          {
            text: '投资人',
            startValue: 0,
            endValue: 52,
            duration: 1000,
            svgName: 'user',
            color: '#36a3f7',
            type: 'messages',
            decimals: 0,
          },
          {
            text: '股票数量',
            startValue: 0,
            endValue: 6520,
            duration: 1000,
            svgName: 'list',
            color: '#f4516c',
            type: 'purchases',
            decimals: 0,
          },
          {
            text: '交易次数',
            startValue: 0,
            endValue: 45860,
            duration: 1000,
            svgName: 'radio',
            color: '#34bfa3',
            type: 'shoppings',
            decimals: 0,
          }
        ],
        investPanelGroupOptions: [
          {
            text: '已购股票',
            startValue: 0,
            endValue: 6,
            duration: 1000,
            svgName: 'peoples',
            color: '#40c9c6',
            type: 'newVisitis',
            decimals: 0,
          },
          {
            text: '资产总额',
            startValue: 0,
            endValue: 65202.21,
            duration: 1000,
            svgName: 'message',
            color: '#36a3f7',
            type: 'messages',
            decimals: 2,
          },
          {
            text: '分红金额',
            startValue: 0,
            endValue: 2653.23,
            duration: 1000,
            svgName: 'excel',
            color: '#f4516c',
            type: 'purchases',
            decimals: 2,
          },
          {
            text: '收益',
            startValue: 0,
            endValue: 6521.32,
            duration: 1000,
            svgName: 'money',
            color: '#34bfa3',
            type: 'shoppings',
            decimals: 2,
          }
        ],
      },
      publishLineChart: {
        title: {
          text: '股票价格'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }]
      },
      operateLineChart: {
        title: {
          text: '注册趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['发行人', '投资人']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '发行人',
            type: 'line',
            stack: '数量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '投资人',
            type: 'line',
            stack: '数量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
        ]
      },
      investStockRankTop10: [],
      operateStockRankTop10: [],
    }
  },
  created() {
    this.init();
  },
  methods: {

    // 初始化数据
    async init() {
      const _this = this;
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;

        this.handleShowChartsByRoles();

        getOperatePanelGroup().then(res => {
          if (res && res.code === 200) {
            _this.options.operatePanelGroupOptions[0].endValue = res.data.publisherNum;
            _this.options.operatePanelGroupOptions[1].endValue = res.data.inverterNum;
            _this.options.operatePanelGroupOptions[2].endValue = res.data.stockNum;
            _this.options.operatePanelGroupOptions[3].endValue = res.data.tradNum;
          }
        });

        getInvestPanelGroup().then(res => {
          if (res && res.code === 200) {
            _this.options.investPanelGroupOptions[0].endValue = res.data.stockNum;
            _this.options.investPanelGroupOptions[1].endValue = res.data.assetSum;
            _this.options.investPanelGroupOptions[2].endValue = res.data.earnCount;
            _this.options.investPanelGroupOptions[3].endValue = res.data.earnCount;
          }
        })

        getStockByOwner(this.user.userId).then(res => {
          if (res && res.code === 200 && res.data) {
            _this.options.publishPanelGroupOptions[0].endValue = res.data.openPrice;
            _this.options.publishPanelGroupOptions[1].endValue = res.data.latestPrice;
            _this.options.publishPanelGroupOptions[2].endValue = res.data.amount;
            _this.options.publishPanelGroupOptions[3].endValue = res.data.volume;
          }
        })

        getPublishChartData().then(res => {
          console.log('getPublishChartData', res)
          if (res && res.code === 200) {
            _this.publishLineChart.xAxis = {
              type: 'category',
              data: res.data.xAxisData,
            };
            _this.publishLineChart.series = [{
              data: res.data.yAxisData,
              type: 'line'
            }]
          }
        });

        getOperateChartData().then(res => {
          console.log('getOperateChartData', res)
          if (res && res.code === 200) {
            _this.operateLineChart.xAxis = {
              type: 'category',
              boundaryGap: false,
              data: res.data.xAxisData
            };
            _this.operateLineChart.series = [
              {
                name: '发行人',
                type: 'line',
                stack: '数量',
                data: res.data.yAxisDataPublish
              },
              {
                name: '投资人',
                type: 'line',
                stack: '数量',
                data: res.data.yAxisInvest
              },
            ]
          }
        });

        getOperateStockRankTop10().then(res => {
          console.log('getOperateStockRankTop10', res)
          if (res && res.code === 200) {
            _this.operateStockRankTop10 = res.data;
          }
        });

        getInvestStockRankTop10().then(res => {
          console.log('getInvestStockRankTop10', res)
          if (res && res.code === 200) {
            _this.investStockRankTop10 = res.data;
          }
        });

      });
    },

    // 根据用户角色控制显示权限
    handleShowChartsByRoles() {
      const roleGroup = this.roleGroup;
      if (roleGroup) {
        if (roleGroup.indexOf('超级管理员') !== -1 ) {
          this.publishFlag = true;
          this.investFlag = true;
          this.operateFlag = true;
        }
        if (roleGroup.indexOf('发行人') !== -1 ) {
          this.publishFlag = true;
        }
        if (roleGroup.indexOf('投资人') !== -1 ) {
          this.investFlag = true;
        }
        if (roleGroup.indexOf('平台审核') !== -1 ) {
          this.operateFlag = true;
        }
      }
    },



  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  height: 100vh;
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.rank-price {
  color: red;
  width: 30px;
  height: 10px;
  float: right;
  margin-right: 10px;
}
</style>
